<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="我的结算卡"
    ></u-navbar>

    <view class="list">
      <view
        v-for="item in bankList"
        :key="item.id"
        class="item"
        @click="handleEdit(item)"
      >
        <image class="bgImg" :src="item.imgUrl" mode="widthFix"></image>
        <view class="item-in">
          <view class="item-in_f">
            <view class="info">
              <text class="baneName">{{ item.bankName }}</text>
              <text class="name">{{ item.name }}</text>
            </view>
            <view class="btn" @click.stop="unBindCard(item)">解绑</view>
          </view>
          <view class="item-in_s">
            <view class="label">卡号</view>
            <view class="cardNo u-flex u-row-between">
              <text>****</text>
              <text>****</text>
              <text>****</text>
              <text>{{ item.cardNo }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="addCard">
      <view class="addCard-in" @click="handleAddCard">+添加银行卡</view>
    </view>
    <u-modal
      v-model="showModal"
      ref="uModal"
      title="提示"
      :content="'确认解绑该' + tabs[tabIndex]"
      :show-cancel-button="true"
      confirm-text="确定"
      confirmColor="#393B4D"
      @confirm="modalConfirm"
    >
    </u-modal>
  </view>
</template>
<script>
import service from '@/common/service.js';
import util from '@/common/utils.js';

export default {
  data() {
    return {
      bankList: [],
      showModal: false,
      currentItem: {},
    };
  },
  onLoad() {
    // this.getMyAllBankCard();
  },
  onShow() {},
  methods: {
    getMyAllBankCard() {
      const that = this;
      const param = { type: this.tabIndex };
      service.getMyAllBankCard(
        param,
        function (res) {
          if (res && res.status === 1) {
            let bankList = res.data;
            // let aliPay = {
            //   name: "支付宝",
            //   imgUrl: "",
            //   logo: "../../static/images/icon-zfb.png",
            //   code: "AliPay",
            //   id: 0,
            //   createTime: "",
            //   updateTime: "",
            //   state: 0,
            // };
            // bankList.push(aliPay);

            that.bankList = bankList.map((item) => {
              if (item.cardNo) {
                item.cardNo = item.cardNo.substring(item.cardNo.length - 4);
              }
              return item;
            });
          } else {
            util.showToast(res.message);
          }
        },
        function (res) {}
      );
    },
    modalConfirm() {
      const that = this;
      const param = { id: that.currentItem.id };
      service.deleteBankCard(
        param,
        function (res) {
          if (res && res.data) {
            util.showToast('解绑成功');
            that.getMyAllBankCard();
          }
        },
        function (res) {
          util.showToast(res.message || '解绑失败，请重试');
        }
      );
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    unBindCard(item) {
      this.currentItem = item;
      this.showModal = true;
    },
    handleEdit(item) {
      uni.navigateTo({
        url: '/pages/sharedBenefits/bindSettlementCard?id=' + item.id,
      });
    },
    handleAddCard() {
      uni.navigateTo({
        url: '/pages/sharedBenefits/bindSettlementCard',
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 0 0 160rpx;
  text-align: center;
  background-color: #f7f7f7;
}

.list {
  width: 100%;
  padding: 30rpx 50rpx;
  .item {
    position: relative;
    margin-bottom: 30rpx;
    width: 100%;
    line-height: 1;
    .bgImg {
      width: 100%;
      height: auto;
    }

    .item-in {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;
      height: 100%;
      padding: 40rpx;
      z-index: 999;
      .item-in_f {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .info {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          margin-left: 50rpx;
          padding: 0 30rpx;

          .baneName {
            margin-top: 0;
            font-size: 26rpx;
            font-weight: normal;
            color: #ffffff;
            text-align: left;
          }

          .name {
            margin-top: 20rpx;
            font-size: 26rpx;
            font-weight: normal;
            color: #ffffff;
            text-align: left;
          }
        }

        .btn {
          margin-top: -20rpx;
          width: 120rpx;
          height: 46rpx;
          line-height: 46rpx;
          font-size: 24rpx;
          font-weight: normal;
          color: #ffffff;
          border: 1rpx solid #ffffff;
          border-radius: 23rpx;
        }
      }
      .item-in_s {
        width: 100%;
        .label {
          width: 100%;
          font-size: 22rpx;
          font-weight: normal;
          color: rgba($color: #ffffff, $alpha: 0.4);
          line-height: 1;
          text-align: left;
        }
        .cardNo {
          margin-top: 15rpx;
          width: 100%;
          font-size: 42rpx;
          font-family: DIN;
          font-weight: 500;
          color: #ffffff;
          line-height: 1;
          text-align: left;
        }
      }
    }
  }
}

.addCard {
  position: fixed;
  bottom: 60rpx;
  width: 100%;
  padding: 0 30rpx;
  .addCard-in {
    padding: 0;
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    font-family: PingFang SC, sans-serif;
    font-weight: 800;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
  }
}

.slot-wrap {
  position: relative;
  width: 100%;
  text-align: center;
}
</style>
